安安～我是ChiYu～
昨天把通知設定拆成 Checkbox、Radio 與 Switch 後，邀請成員流程只剩兩個欄位：「所屬部門」和「協作者」。
部門要能搜尋，但只能從既有資料選一筆；協作者也要搜尋，卻能保留多筆結果。AI 第一版很乾脆，把兩個都做成「可以搜尋、可以多選，也可以自己輸入」的 Dropdown。
昨天結尾停在「所屬部門」的第一版。它能輸入「研究」，也能列出「研究組」，看起來該有的都有了。
圖 1：和昨天結尾是同一個 AI 第一版。輸入框與候選清單都有出現，資料邊界、選取結果和非理想狀態則全部缺席。
一顆元件包辦所有需求，聽起來省事。實際上，每多塞一種能力，就多一條還沒說清楚的資料規則：輸入的文字算搜尋條件，還是新資料？按下 Enter 是選取，還是建立？多選後的值又放在哪裡？
我先打開比較頁，不問這顆下拉長什麼樣，先問四件事：能不能輸入、輸入後是否只能選既有資料、可不可以建立新值，以及一次能選幾筆。
圖 2：回答四個資料問題後，Select、Listbox、Combobox、Autocomplete 與 Multi-select 已經不再是同一顆「Dropdown」。
這是系列裡最早完整保存實驗條件的一篇。原始實驗在 2026 年 7 月 23 日執行，使用 Codex Desktop、GPT-5、相同的六筆虛構部門資料，以及 Astro／TypeScript 環境。
整理文章時，我又在 2026 年 7 月 27 日用原始 Prompt 重跑一張基準畫面，沒有追加說明：
幫我做一個好用、漂亮、可以搜尋的下拉選單。
開頭圖 1 就是這句 Prompt 的輸出。我把它留在文章最前面，因為接下來每一個元件名稱，都在回答這張第一版沒有說清楚的問題。
我輸入「研究」後，畫面確實有反應。接著才是麻煩：按 Enter 會選到既有的「研究組」，還是替系統建立一個叫「研究」的新部門？需求沒說，畫面也沒回答。
載入中、無結果、失敗與停用同樣不存在。只看靜態截圖，很容易把「有輸入框、有清單」誤認成完成版。
我的選型最後停在「只能選既有值的可編輯 Combobox」。原因很具體：管理員可以輸入關鍵字，但最後只能提交 API 裡既有的一個部門。這條資料規則排除了自由文字，也排除了不方便搜尋大量資料的普通 Select。
Combobox 不是天生只能選既有值。W3C 的模式同時包含可自由輸入，以及只能從允許值中選擇的做法；Autocomplete 則描述候選值如何隨輸入出現。這篇把它們拆開介紹，是為了讓 Prompt 比較好說，不代表所有設計系統都會用完全相同的名稱切界線。
我替 LumenDesk 的選擇欄位補上三條契約：輸入是在查資料還是建立資料、最後的值是否必須來自系統，以及一次能留下幾筆。
| 使用情境 | 適合的元件 | 需要先說清楚的資料規則 |
|---|---|---|
| 選項不多，只選一筆既有值 | Select | 不需要輸入或搜尋，答案來自固定選項。 |
| 選項直接留在畫面上供人瀏覽 | Listbox | 選項、焦點與目前值都持續可見。 |
| 可輸入關鍵字，並開啟候選清單 | Combobox | 先決定候選是建議值還是唯一允許值；本篇部門欄只收既有資料。 |
| 輸入途中提供候選建議 | Autocomplete 行為 | 必須另外決定能否保留候選清單以外的文字，以及採手動或自動完成。 |
| 需要同時選取多筆 | Multi-select 模式 | 可由多選 Listbox 或可搜尋的多選 Combobox 組成；已選內容、移除方式與數量上限都要看得見。 |
「可搜尋」只回答了如何找到資料，「可多選」決定要保留幾筆，「可自建」則會直接改變資料來源。把這三句混成「做一個厲害的 Dropdown」，AI 只能把功能當自助餐往裡面裝。
如果你還在兩三個選項之間猶豫，可以沿著這張判斷圖走一次。
圖 3：是否需要輸入、值是否受限，以及單選或多選，是排除錯誤元件的三個主要分岔點。
Combobox｜組合式選擇框 是一個帶有 Popup 的輸入元件，可以做成 select-only，也可以允許輸入文字；可編輯版本又能選擇只接受既有值，或保留自由輸入。LumenDesk 的「所屬部門」採用可搜尋、單選，而且只能接受既有部門的版本。
我在網站輸入「研究」，按方向鍵往下，再按 Enter，最後選到既有的「研究組」。
圖 4：輸入「研究」後顯示既有候選項目；方向鍵移動焦點，Enter 才完成選取。
接著我改輸入一個不存在的名稱。畫面進入無結果，沒有默默把自由文字升格成新部門；按 Reset 後又能回到初始狀態。
這三步就是我對 Combobox 的基本驗收：輸入只負責縮小既有資料、不碰滑鼠也能選取、無結果與重設都有明確回應。載入失敗和停用也不能只存在 Prompt 裡。
圖 5：輸入、候選清單、目前值與鍵盤操作要一起設計，少一塊都會留下猜測。
Vibe Coding 若只寫「可搜尋的 Dropdown」，AI 可能交出搜尋框，也可能做成能自由新增標籤的輸入元件。兩個畫面看起來都能用，送到 API 的資料卻不是同一回事。
Select｜選擇器 適合選項少、內容一眼能掃完，而且只需要一筆既有值的情境，例如所屬校區或表單語言。
圖 6：選項數量少時，Select 讓使用者直接挑一個答案，不必先輸入關鍵字。
如果選項有上百筆，硬塞進 Select 只會讓人一直滑。這時增加搜尋不是替 Select 裝一個放大鏡就好，元件的焦點、候選清單與鍵盤行為都得一起升級，Combobox 會比較合適。
Listbox｜選項清單 適合權限清單、篩選側欄或需要直接瀏覽的選取清單。
圖 7：Listbox 的候選項目持續可見，使用者能同時看到焦點位置與目前選取值。
它的優勢正是不用每次展開才看得到選項。反過來，資料多到必須輸入關鍵字才能找到時，單靠 Listbox 就不夠，應改用 Combobox 或搭配輸入建議的設計。
Autocomplete｜自動完成 會在輸入途中提供候選建議，常見於收件者、地點或文章標籤。它比較像輸入與候選清單的行為模式，不一定是和 Combobox 完全分離的另一顆元件。
圖 8：Autocomplete 幫使用者縮小輸入範圍，但候選清單以外的文字能不能留下，仍要由需求決定。
這個元件最容易被一句「會自動完成」帶過。建議的內容從哪裡來？沒選建議時能不能送出？這兩題若沒有答案，它可能接近受限資料的 Combobox，也可能只是一般 Text Field 的輸入輔助。
Multi-select｜多選選擇器 適合指派多個標籤或邀請多位協作者。它可以是持續展開的多選 Listbox，也可以是搜尋後把已選值顯示成 Chip 的 Combobox；LumenDesk「協作者」欄位採用後者。
圖 9：已選協作者留在欄位附近，每一筆都有清楚移除方式，也能看見選取上限。
只在展開清單裡打勾不夠。清單收起來後，使用者仍要知道自己選了誰、如何移除其中一筆，以及還能再選幾位。若最後只需要一個部門，就回到 Select 或 Combobox，不要讓單選欄位背著整套多選狀態到處跑。
五個元件與必要狀態都能在 Select、Combobox、Autocomplete 完整比較頁 集中核對。拿不定主意時，先回答資料契約，再進各元件頁操作，會比從「下拉選單」四個字繼續猜快很多。
如果同一個頁面同時出現多種選擇欄位，我會先用下面這份 Prompt 分工：
為 LumenDesk 的資料欄位選擇正確元件：
- 少量固定的「所屬校區」使用單選 Select。
- 直接保留在篩選側欄的「專案狀態」使用 Listbox，清楚顯示焦點與目前值。
- 「指派部門」使用單選 Combobox；可搜尋，但只能從 API 候選清單選既有部門。
- 「收件者」使用 Autocomplete；輸入時提供建議，需求要明確說明是否允許自由輸入。
- 「協作者」使用 Multi-select；顯示已選項目、移除控制與人數上限。
所有元件都需要可見 Label；會從 API 取得候選值的元件，再提供載入、無結果與失敗回饋。清單能用方向鍵移動與 Enter 選取；有 Popup 的元件支援 Escape 關閉，而且不能順便清掉已確認的值。360px 寬度下，Label、目前值與狀態訊息都不可被截斷。
需求若改成「可以選多位協作者」，不要只替 Combobox 塞一排勾選框就算完成。直接指定 Multi-select，再補上已選項目、移除方法、人數上限與無結果狀態，AI 才知道多選增加了哪些責任。
通用 Prompt 適合分配頁面上的元件；真正拿來改善這次「指派部門」實驗的版本要更聚焦：
建立一個單選 Combobox，讓工作區管理員從既有部門中搜尋並選取一項。
資料由 API 載入，不可自行新增部門。輸入關鍵字時篩選選項；
方向鍵移動候選項、Enter 選取、Escape 關閉。
提供 Default、Selected、Loading、Empty、Error、Disabled 與 Reset。
360px 下仍要看得到 Label、選取值與錯誤訊息。
使用可見 Label、combobox／listbox 語意、清楚 Focus 與狀態訊息。
驗收：不用滑鼠也能搜尋並選到既有部門；載入失敗時能理解問題並重試。
回到圖 4 的 Demo，輸入「研究」後按方向鍵與 Enter，值會成為「研究組」並收合清單。輸入不存在的內容則進入無結果，不會偷偷建立新部門；Reset 能回到初始狀態，切到 Disabled 時也不會留下仍可操作的清單。
這次仍有三件事沒有通過完整產品門檻：
所以我可以說鍵盤流程與 360px 已通過，不能把所有使用方式一起打包成「驗證完成」。交付前仍要依序輸入關鍵字、用鍵盤選一筆、清除目前值，再切換無結果與載入失敗。哪一步讓人不知道接下來能做什麼，哪一步就得退回修改。
回到這幾天一直在處理的邀請流程：使用者先用 Link 查看權限說明，接著填帳號與備註、選擇通知方式，再用 Combobox 從既有部門選到「研究組」。若要加入多位協作者，欄位改用 Multi-select，已選的人會留在畫面上。最後按下送出；失敗時資料保留，成功後才關閉 Dialog。
這是 LumenDesk 第一條走通的完整任務，後台當然還沒做完。
明天，團隊要開始建立內部活動。預算是 48,000 元、配送距離要微調、餐點數量要增減，活動結束後還得留下滿意度。全部都是數字，AI 很可能又想送它們一人一條 Slider。
我先把這個念頭真的放進畫面，結果五個數字排得十分整齊，連滿意度也分到一條滑軌。
圖 10：五個數字都有顯示，卻只能靠拖曳修改。精確預算、少量餐點與主觀評價暫時被當成同一份工作。
畫面先留在這裡。明天要處理的不是 Slider 的配色，而是這五個數字究竟要多精確，又該用什麼方式修改。
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術